<template>
  <el-card class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-suffix=":">
      <el-form-item label="器具名称" prop="assistEquName">
        <el-input v-model="form.assistEquName" placeholder="请输入器具名称" />
      </el-form-item>
      <el-form-item label="所属器具分类" prop="cid">
        <el-select v-model="form.cid" placeholder="请选择器具分类">
          <el-option
            v-for="item in getDictionary('ASSIST_EQU_CATEGOTY')"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="使用年限" prop="usePeriod">
        <el-input-number v-model="form.usePeriod" :min="1" placeholder="请输入使用年限" />
      </el-form-item>

      <el-form-item label="器具图片" prop="assistEquImageUrl">
        <picture-upload
          v-model="form.assistEquImageUrl"
          type="assistEquImageUrl"
          path="appliance"
          @del-picture="delPicture"
          @add-picture="addPicture"
        ></picture-upload>
      </el-form-item>
      <el-form-item label="指导价(元)" prop="guidePrice">
        <el-input v-model="form.guidePrice" placeholder="请输入指导价" />
      </el-form-item>

      <el-form-item label="单位" prop="unit">
        <el-input v-model="form.unit" placeholder="请输入单位" />
      </el-form-item>
      <el-form-item label="适用对象及用途" prop="rangeDesc">
        <el-input
          type="textarea"
          :autosize="{ minRows:4 }"
          v-model="form.rangeDesc"
          placeholder="请输入适用对象及用途"
        />
      </el-form-item>
      <el-form-item label="器具详情" prop="assistEquDesc">
        <tinymce v-model="form.assistEquDesc" :height="300" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import Tinymce from '@/components/Tinymce'

export default {
  name: "EqManageDetail",
  components: {
    Tinymce
  },
  data() {
    return {
      form: {
        assistEquName: null,
        assistEquDesc: null,
        usePeriod: 1,
        guidePrice: null,
        unit: null,
        rangeDesc: null,
        // disabledTypeId: null,
        cid: null,
        assistEquImageUrl: null
      },
      rules: {
        assistEquName: [{ required: true, message: "请输入器具名称", trigger: "blur" }],
        usePeriod: [{ required: true, message: "请输入使用年限", trigger: "blur" }],
        // disabledTypeId: [{ required: true, message: "请选择残疾类别", trigger: "change" }],
        cid: [{ required: true, message: "请选择器具分类", trigger: "change" }],
        assistEquImageUrl: [{ required: true, message: "请上传器具图片", trigger: "change" }]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.API.addOrUpdateAssistEquInfo({ body: this.form }).then(res => {
            this.success("提交成功!");
            this.$refs["form"].resetFields();
            this.$router.go(-1)
          }).catch(err => this.warning(err))
        } else {
          return false;
        }
      })
    },
    addPicture(val, field) {
      this.form[field] = val;
    },
    delPicture(field) {
      this.form[field] = null;
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.API.getAssistEquInfoById({ id: this.$route.query.id }).then(ret => {
        for (let key in this.form) {
          if (key === 'cid') this.form[key] = ret.data.assistCategoryId
          else this.form[key] = ret.data[key]
        }
        this.form.id = ret.data.id
      });
    }
  }
}
</script>
<style scoped lang="scss">
  .app-container {
    padding-top: 20px;
    padding-right: 50px;

    .el-input {
      width: 400px;
    }

    .el-select {
      width: 300px;
    }
  }
</style>
